<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
  *{margin: 0;padding: 0;}
  .fl{float: left;}
  body{background: #000}
  #box{width: 800px;height: 240px;border: 10px solid #E7EFF7;background: #fff;margin: 170px auto;padding: 10px;}
  textarea{width: 300px;height: 220px;background: #EFEFD6;border: 1px dashed #000;outline: none;resize:none;padding: 10px;}
  .div1{width: 156px;height: 240px;position: relative;}
  .div1 strong{display: block;width: 120px;height: 40px;background: #F76300;color: #fff;text-align: center;line-height: 40px;margin: 0 auto;cursor: pointer;}
  #hide{width: 156px;height: 40px;background: rgba(255,255,255,0.5);position: absolute;display: none;}
  p{display: inline-block;width: 300px;height: 220px;background: #63EFF7;border: 1px dashed #000;padding: 10px;font-size: 14px}
  .div1 .span1{width: 100%;height: 40px;line-height: 40px;display: inline-block;text-align: center;}
  ul{width: 80px;height:10px;margin: 10px auto;display: none;}
  li{list-style: none;float: left;margin-right: 2px;background: #E7A521;width: 8px;height: 10px;}
  </style>
  <script type="text/javascript">
    window.onload = function(){
      var Tex = document.getElementsByTagName('textarea')[0];
      var P = document.getElementsByTagName('p')[0];
      var Str = document.getElementsByTagName('strong')[0];
      var hide = document.getElementById('hide');
      var Span1 = document.getElementsByClassName('span1')[0];
      var Span = Span1.getElementsByTagName('span');
      var Ul = document.getElementsByTagName('ul')[0];
      var Li = document.getElementsByTagName('li');
      var num = 0;
      var Timer = null;
      function fun(){
        var str1 = Tex.value.slice(0,1);
        var str2 = Tex.value.slice(1);
        P.innerHTML += str1;
        Tex.value = str2;
        Span[0].innerHTML = P.innerHTML.length;
        num++;
        num %= Li.length;
        for (var i = 0; i < Li.length; i++) {
          Li[i].style.background = "#E7A521";
        };
        Li[num].style.background = "#E3462C";
        if(Tex.value.length == 0){
          clearInterval(Timer)
          Ul.style.display = "none";
          hide.style.display = "none";
        }
      }
      Str.onclick = function(){
        Ul.style.display = "block";
        hide.style.display = "block";
        P.innerHTML = '';
        Span[2].innerHTML = Tex.value.length;
        clearInterval(Timer)
        Timer = setInterval(fun,50)
      }
    }
  </script>
</head>
<body>
  <div id="box">
    <textarea class="fl">说到西安，我算是很有发言权了，确实是历史文化底蕴浓厚的古城，前后和不同的人去过三次，每次的感受都是不同的，最近一次上个月刚去的，也是玩的最好的一次，花的费用比第一次自己去要少很多，少跑了很多冤枉路，我们是自己订好往返机票，提前联系了西安当地品质自由行的姣姣，由她全程按排了4天的行程，住宿、导游、门票、交通等，还有1天自由活动，很省心也很划算，重点是啥也不用操心，只管玩好吃好，历史性的景点真心给导游点赞，听完讲解真的是发现自己的历史白学了</textarea>
    <div class="div1 fl">
      <div id="hide"></div>
      <strong>把文字右移</strong>
      <span class="span1">
        <span>0</span>
        <span>/</span>
        <span>0</span>
      </span>
      <ul>
        <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
      </ul>
    </div>
    <p></p>
  </div>
</body>
</html>
</body>
</html>